import { useState } from 'react';
import './App.css';

// 1. 变量声明的 require 转换
const logo = require('./assets/react.svg');
const style = require('./a.module.css');
const utils = require('./utils.js');

// 2. 纯导入（不需要变量名）
require('./styles.css');

// 3. 变量名复用测试
const img1 = require('./assets/react.svg');
const img2 = require('./assets/react.svg');

// 4. 对象展开的 require
const props = { ...require('./props.json') };

// 7. 动态路径测试
// const fileName = 'react';
// const dynamicImg = require(`./assets/${fileName}.svg`);

// 8. 条件require测试
const conditionalImg = process.env.NODE_ENV === 'development'
  ? require('./assets/arrow.png')
  : require('./assets/check.png');

// 9. 解构赋值测试
const { width, height } = require('./image-config.json');

// 10. 多级路径测试
const nestedModule = require('./nested/deep/module.js');

function App() {
  const [count, setCount] = useState(0);

  // 5. 模板字符串中的 require
  const imagePath = `./assets/${require('./image-path.json').path}`;
  const bgStyle = `url(${require('./assets/react.svg')})`;

  // 6. 函数调用中的 require
  const processImage = (src: string) => console.log(src);
  processImage(require('./assets/react.svg'));

  // 11. 异步加载测试
  const handleClick = async () => {
    const dynamicModule = await require('./dynamic-module.js');
    console.log(dynamicModule);
  };

  // 12. 数组中的require
  const images = [
    require('./assets/image1.png'),
    require('./assets/image2.png'),
    require('./assets/image3.png'),
  ];

  return (
    <>
      <div>
        {/* JSX 中直接使用 require */}
        <img src={require('./assets/react.svg')} alt="logo" />

        {/* 使用变量声明的 require */}
        <img src={logo} alt="logo2" className={style.logo} />

        {/* 使用复用的变量 */}
        <img src={img1} alt="logo3" />
        <img src={img2} alt="logo4" />

        {/* 使用对象展开的属性 */}
        <div {...props} style={{ backgroundImage: bgStyle }}>
          <h1>{utils.formatTitle('Hello')}</h1>
        </div>

        {/* 使用模板字符串 */}
        <img src={imagePath} alt="dynamic" />

        {/* 13. 使用动态路径的图片 */}
        {/* <img src={dynamicImg} alt="dynamic path" /> */}

        {/* 14. 条件require结果 */}
        <img src={conditionalImg} alt="conditional" />

        {/* 15. 使用解构的属性 */}
        <div style={{ width, height }}>
          Sized Container
        </div>

        {/* 16. 渲染require数组 */}
        <div className="image-grid">
          {images.map((src, index) => (
            <img key={index} src={src} alt={`grid-${index}`} />
          ))}
        </div>
      </div>

      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <button onClick={handleClick}>Load Dynamic Module</button>
      </div>
    </>
  );
}

export default App;